<template>
	<!-- 首页 -->
	<view class="total">
		<!-- 定位 -->
		<view class="topbg">
			<view class="notes" style="background-color: #999;" v-if="loding">
				<!-- <image :src="noticeList1.avatar" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image> -->
				<view class="" style="margin-top: 20rpx;margin-bottom: 20rpx; ">
					<text style="color: #fff;margin-left: 10rpx;">{{ noticeList1.mobile }}&nbsp;&nbsp;刚刚下了一单！</text>
				</view>
			</view>

			<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
			<!-- <view class="font">有样式的字体</view> -->
			<view class="location">
				<!-- <view class="location_picture" @click="reLocation()">
					<image src="../../static/Group41.png" mode="" class="picture_a"></image>
				</view> -->
				<view class="address" @click="chooseCity">{{ city.text }}</view>
				<view class="Aright" @click="chooseCity"><image src="../../static/right.png"></image></view>
			</view>
			<!-- 轮播图 -->

			<view class="Top"><u-swiper height="256rpx" indicator :list="bannerList" @click="handleClickBanner" keyName="cover_image" :autoplay="true"></u-swiper></view>
		</view>

		<view class="main">
			<view>
				<image src="../../static/zhuanye.png" mode=""></image>
				<view>专业陪诊</view>
			</view>
			<view>
				<image src="../../static/youxuanfuwu.png" mode=""></image>
				<view>优选服务</view>
			</view>
			<view>
				<image src="../../static/wuyoujiuyi.png" mode=""></image>
				<view>无忧就医</view>
			</view>
			<view>
				<image src="../../static/gaoduanzhixuan.png" mode=""></image>
				<view>高端之选</view>
			</view>
		</view>

		<u-notice-bar :text="text1" bgColor="#ebfdf9" color="#4ad3b8"></u-notice-bar>
		<view class="centralSection" style="margin-top: 20rpx;">
			<!-- 中间图 -->
			<view class="centralfor br14" @click="handleCenterSection(0)">
				<view class="info">
					<view>就医陪诊</view>
					<view>专业陪诊</view>
					<view>全程无忧</view>
				</view>
				<image :src="JingangImage[1].cover_image" class="chartthree" mode=""></image>
			</view>
			<view class="centralfor br14" @click="handleCenterSection(1)">
				<view class="info">
					<view>院内陪护</view>
					<view>专业陪护</view>
					<view>家人般的温暖</view>
				</view>
				<image :src="JingangImage[0].cover_image" class="chartthree" mode=""></image>
			</view>
			<!-- <view class="centralone">
				<view class="centraltwo" @click="handleCenterSection(0)">
					<image :src="JingangImage[0].cover_image" class="chartone" mode=""></image>
				</view>
				<view style="margin-top: 34rpx;" @click="handleCenterSection(2)">
					<image :src="JingangImage[2].cover_image" mode="" class="charttwo"></image>
				</view>
			</view> -->
		</view>
		<!-- <view class="mains">
			<view class="items " v-for="item in indexList" :key="item.name" @click="godlist(item.id)">
				<image :src="item.logo" mode=""></image>
				<view>{{ item.name }}</view>
			</view>
		</view> -->
		<view style="padding:  30rpx;">
			<view class="d-flex mycontent" style="flex-wrap: wrap;">
				<view class=" " v-for="item in indexList" :key="item.name" @click="godlist(item.id)" style="width: 24%;flex-shrink:0;margin-bottom: 10rpx;">
					<view class="d-flex a-center j-center" style="flex-direction: column;">
						<view class="myimg"><image :src="item.logo" mode="widthFix"></image></view>

						<view
							style="margin-top: 15rpx;font-size: 26rpx;margin-bottom: 8rpx;
			font-weight: 400;
			color: #1d2129;"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 医疗服务 -->
		<view style="margin-top: 40rpx;" v-if="false">
			<view class="typeface"><text>医疗服务</text></view>
			<view class="picture">
				<view class="" @click="handleFuwu(index)" v-for="(item, index) in FuwuImage" :key="100 + index">
					<image :src="item.cover_image" class="pictureone" mode=""></image>
				</view>
			</view>
		</view>
		<view class="typeface">
			<text>全部医院</text>
			<view class="" style="display: flex;flex-direction: row;" @click="sousuoBtn()">
				<view class=""><image src="../../static/index/sousuo.png" mode="" style="width: 35rpx;height: 35rpx;"></image></view>

				<text style="color: #999;font-size: 28rpx;margin-left: 10rpx;margin-top: -5rpx;font-weight: 400;">搜索</text>
			</view>
		</view>
		<!-- 医院列表 -->
		<view v-for="(item, index) in hospitalList" :key="index" class="Bottombar" @click="LookHospitalDetail(item)">
			<view class="Bottompuper"><image :src="baseUrl + item.cover_img" mode="" class="bottomnp"></image></view>
			<view class="Bottomworde">
				<view class="Bottom_onew">{{ item.name }}</view>
				<view class="diswods">
					<view class="S_display">{{ item.rank }}</view>
					<view class="A_display">{{ item.type }}</view>
					<view class="N_display">{{ item.nature }}</view>
				</view>
				<!-- <view class="D_display">重点科室：{{ item.key_department }}</view> -->
			</view>
		</view>
		<!-- 弹出框 -->
		<u-popup :show="showPopup" mode="center" :round="10" customStyle="padding:40rpx;width:400rpx;height:160rpx">
			<view>
				<view style="width: 100%;text-align: center;"><text>请确认是否联系客服？</text></view>
				<view class="btn_contianer">
					<button open-type="contact" size="mini" style="padding: 0;margin:0"><view class="service_btn">联系客服</view></button>
					<view class="cancel_btn" @click="showPopup = false">取消</view>
				</view>
			</view>
		</u-popup>
		<!-- 城市选择 -->
		<u-picker :show="show" ref="uPicker" :columns="dataTree" keyName="text" @change="changeHandler" @cancel="show = false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
import amap from '../../utils/amap-wx.130.js';
const amapObject = new amap.AMapWX({ key: '3aab9d54c335ba3243ba9f7eaecc02ea' });
export default {
	data() {
		return {
			bannerList: [
				{
					banner_image: '/static/Group36.png'
				}
			],
			JingangImage: [],
			FuwuImage: [],
			city: {},
			hospitalList: [],
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*有没有等多*/
			no_more: false,
			showPopup: false,
			show: false,
			cityList: [],
			dataTree: [],
			serviceList: [],
			text1: '您好！本平台由中国平安保险公司承保，如果您有需要，请放心下单！',
			noticeList: [],
			indexList: [],
			oneshow: true,
			twoshow: false,
			threeshow: false,
			fourshow: false,
			noticeList1: [],
			loding: false,
			jingdu: '',
			cityID: '',
			cityname: '',
			weidu: '',
			fximage: 'https://20240202xhfpeizhenxiaochengxu.rchz.top/uploads/20240307/53a341fd4b39970a812d7680f2b137df.png',
			baseUrl:''
		};
	},
	onLoad() {
		// this.oneshow1();
		this.baseUrl=this.https
		console.log(this.https,"////////////////////////")

		let citylist = uni.getStorageSync('city');
		if (citylist) {
			this.city = citylist;
		} else {
			this.city = {
				text: '滨州市',
				value: 1513
			};
		}
		// 获取轮播图
		this.getBannerList();
		// 获取中间图
		this.getCenterList();
		// 获取服务图
		this.getFuwuList();
		// 获取所有城市
		this.getAllRegion();
		// 获取类型/
		this.getGoodsList();
		// 下单
		this.homeOrderList();
		// this.address();
		this.xxdz();
		
	},
	onShow() {
		this.page = 1;
		// 获取医院列表
		this.getHospitalList();
		
	},
	onReachBottom() {
		let self = this;
		if (self.no_more) {
			return;
		}
		self.page += 1;
		if (self.page <= self.last_page) {
			self.getHospitalList();
		} else {
			self.no_more = true;
		}
	},
	methods: {
		xxdz() {
			let self = this;
			amapObject.getRegeo({
				success: res => {
					console.log(res[0].regeocodeData.addressComponent.city,'vvvvvvvvvvvvvvvvvvv');
					self.SSaddress(res[0].regeocodeData.addressComponent.city);
				},
				fail: err => {
					console.log(err,'--------------');
				}
			});
		},
		SSaddress(e) {
			let self = this;
			this._get('/api/index/getRegion', { name: e }, function(res) {
				self.cityID = res.data.id;
				self.cityname = res.data.name;
				self.getHospitalList();
			});
		},
		//获取轮播图
		getBannerList() {
			//获取轮播图接口 如果有的话替换url就行 如果是post 则把get改成post 改完之后放在onShow方法里面
			this.get('/api/Zrecduzp/lunbotuhuoqu', {
				status: 1
			}).then(res => {
				this.bannerList = res.data;
			});
		},

		// 滚动下单
		homeOrderList() {
			let self = this;
			//获取轮播图接口 如果有的话替换url就行 如果是post 则把get改成post 改完之后放在onShow方法里面
			this.get('/api/Qunvxckt/homeOrderList', {}).then(res => {
				self.noticeList = res.data;
				// console.log(res.data,'滚动订单')
				if (self.noticeList) {
					self.list();
				}
			});
		},

		list() {
			let self = this;
			let a = self.noticeList.length;
			let i = 0;
			if (i == 0) {
				this.noticeList1 = this.noticeList[0];
			}

			setInterval(() => {
				if (i < a) {
					i++;
					self.one(i);
				} else {
					i = 0;
					self.one(i);
				}
			}, 2500);
			self.loding = true;
		},
		one(i) {
			this.noticeList1 = this.noticeList[i];
		},
		getGoodsList() {
			let self = this;
			self.get('/api/service/list', {}).then(res => {
				self.indexList = res;
				console.log(res,"？？？？？？？？")
			});
		},
		getServiceList() {
			let self = this;
			self.get('/api/Zrecduzp/huoqusuoyoujichufuwu', {
				service_id: 3
			}).then(res => {
				self.serviceList = res.data;
			});
		},
		// 获取金刚区图片
		getCenterList() {
			this.get('/api/Zrecduzp/lunbotuhuoqu', {
				status: 2
			}).then(res => {
				this.JingangImage = res.data;
			});
		},
		// 获取医疗服务图片
		getFuwuList() {
			//服务
			this.get('/api/Zrecduzp/lunbotuhuoqu', {
				status: 4
			}).then(res => {
				this.FuwuImage = res.data;
			});
		},
		//
		godlist(val) {
			uni.navigateTo({
				url: '/pages/HomePage/centerInner/diagnosis?id=' + val
			});
			console.log(val);
		},

		// 搜索
		sousuoBtn() {
			uni.navigateTo({
				url: '/pages/hospital/hospital'
			});
			console.log('搜索');
		},
		//获取全部城市
		getAllRegion() {
			this.get('/api/Zrecduzp/huoququanbuchengshishuzhuangxinxi').then(res => {
				let provinceTree = [];
				let data = [];
				for (let provinceId in res) {
					let citydata = [];
					for (let cityId in res[provinceId].city) {
						if (cityId == 2) {
							data.push({
								text: res[provinceId].city[cityId].name,
								value: res[provinceId].city[cityId].id
							});
						}
						citydata.push({
							text: res[provinceId].city[cityId].name,
							value: res[provinceId].city[cityId].id
						});
					}
					this.cityList.push(citydata);
					provinceTree.push({
						text: res[provinceId].name,
						value: res[provinceId].id
					});
				}
				this.dataTree.push(provinceTree);
				this.dataTree.push(data);
			});
		},
		// 显示城市picker
		chooseCity() {
			this.cityID = '';
			this.cityname = '';
			if (this.dataTree.length > 0) {
				this.show = true;
			}
		},
		// 改变省份获取对应的城市
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.cityList[index]);
			}
		},
		// 确定城市
		confirm(e) {
			console.log(e, 'chengshi id');
			this.city = e.value[1];
			console.log(this.city, '看成是');
			this.cityID = '';
			this.cityname = '';
			uni.setStorageSync('city', this.city);
			// 获取医院列表
			this.getHospitalList();
			this.show = false;
		},
		// 重新定位
		reLocation() {
			let that = this;
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: res => {
					const latitude = res.latitude;
					const longitude = res.longitude;
					uni.request({
						header: {
							'Content-Type': 'application/text'
						},
						//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
						url:
							'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
							res.longitude +
							',' +
							res.latitude +
							'&key=280802ed0116fef931dbcf5e7e9278d7&radius=1000&extensions=all',
						success(re) {
							if (re.statusCode === 200) {
								const province = re.data.regeocode.addressComponent.province;
								const city = re.data.regeocode.addressComponent.city;
								that.cityList.forEach(item => {
									item.forEach(items => {
										if (items.text == city) {
											that.city = items;
											uni.setStorageSync('city', that.city);
											// 获取医院列表
											that.getHospitalList();
										}
									});
								});
							}
						}
					});
				}
			});
		},
		// 轮播图跳转
		handleClickBanner(index) {
			let serverId = this.bannerList[index].service_id;
			if (this.bannerList[index].jump_path == 'null') {
				this.showPopup = true;
			} else {
				uni.navigateTo({
					url: this.bannerList[index].jump_path + '?service_id=' + serverId
				});
			}
		},
		// 获取指定地区的医院信息
		getHospitalList() {
			if (this.page == 1) {
				this.hospitalList = [];
			}
			if (this.cityID) {
				this.city.value = this.cityID;
			}
			if (this.cityname) {
				this.city.text = this.cityname;
			}

			this.post('/api/Zrecduzp/huoquzhidingchengshiyiyuanliebiao', {
				city_id: this.city.value,
				page: this.page
			}).then(res => {
				this.hospitalList = this.hospitalList.concat(res.data);
				// 分页
				this.last_page = res.last_page;
				if (res.last_page <= 1) {
					this.no_more = true;
				} else {
					this.no_more = false;
				}
			});
		},
		// 查看医院介绍
		LookHospitalDetail(item) {
			uni.setStorageSync('hospital', item);
			uni.navigateTo({
				url: '/pages/HomePage/hospitalDetail/hospitalDetail?id=' + item.id
			});
		},
		// 服务跳转区
		handleFuwu(index) {
			let index2 = index + 2;
			console.log(index2);
			let serverId = this.FuwuImage[index].service_id;
			if (this.FuwuImage[index].jump_path == 'null') {
				this.showPopup = true;
			} else {
				uni.navigateTo({
					url: this.FuwuImage[index].jump_path + '?service_id=' + serverId + '&typeID=' + index2
				});
			}
		},
		// 金刚区跳转
		handleCenterSection(index) {
			console.log(index);
			if (index == 0) {
				let id = 91;
				uni.navigateTo({
					url: '/pages/HomePage/centerInner/diagnosis?id=' + id
				});
			} else {
				let id = 95;
				uni.navigateTo({
					url: '/pages/HomePage/centerInner/diagnosis?id=' + id
				});
			}
			// let serverId = this.JingangImage[index].service_id;
			// // console.log(index)
			// console.log(serverId, '试试');
			// if (this.JingangImage[index].jump_path == 'null') {
			// 	this.showPopup = true;
			// } else {
			// 	uni.navigateTo({
			// 		url: this.JingangImage[index].jump_path + '?service_id=' + serverId + '&typeID=' + index
			// 	});
			// }
		},
		// 分享小程序
		onShareAppMessage: function(res) {
			return {
				title: '怡尔康医疗服务平台',
				path: '/pages/index/index',
				imageUrl: this.fximage //这个是分享的图片
			};
		}
	}
};
</script>

<style lang="scss">
.total {
	padding-bottom: 20rpx;
	overflow: hidden;
}
.font {
	font-size: 30rpx;
	font-weight: bold;
	font-family: myfont;
}

page {
	background-color: #f5f5f5;
}

.topbg {
	padding-bottom: 30rpx;
	position: relative;
	.notes {
		position: absolute;
		top: 180rpx;
		left: 50rpx;
		z-index: 99;
		padding: 5rpx;
		border-radius: 35rpx;
		min-width: 200rpx;
		display: flex;
	}
}

.mains {
	width: 686rpx;
	padding: 0 30rpx 15rpx 30rpx;
	background-color: #fff;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20rpx auto;

	.items {
		width: 25%;
		margin-top: 20rpx;

		image {
			margin-left: 55rpx;
			width: 48rpx;
			height: 48rpx;
		}

		view {
			font-size: 24rpx;
			font-weight: 400;
			color: #1d2129;
			text-align: center;
		}
	}
}

.main {
	display: flex;
	width: 690rpx;
	height: 100rpx;
	align-items: center;
	justify-content: space-around;
	margin: 0 auto;

	view {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #ccc;

		image {
			margin-right: 10rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}
}

.indexkfu {
	position: fixed;
	top: 800rpx;
	right: 0rpx;

	image {
		box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		width: 90rpx;
		height: 180rpx;
	}
}

/* 定位栏样式 */
.Aright {
	image {
		margin-top: 16rpx;
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
}

.address {
	font-size: 30rpx;
	color: #424f5e;
	margin-left: 20rpx;
	margin-top: 10rpx;
}

.location {
	display: flex;
	justify-content: flex-start;
	margin: 20rpx;
}

.location_picture {
	margin-left: 55rpx;
}

.location {
	display: flex;
	justify-content: flex-start;
}

.picture_a {
	width: 60rpx;
	height: 60rpx;
	margin-top: 5rpx;
}

/* 顶部图片样式 */
.Topone {
	width: 670rpx;
	height: 315rpx;
}

.Top {
	width: 700rpx;
	margin: 0 auto;
}

/* 顶部标题 */
.Toptitle {
	text-align: center;
	color: #80d5d8;
	font-size: 35rpx;
	font-weight: 900;
	margin-bottom: 35rpx;
	margin-top: 60rpx;
}

/* 中间图片样式 */
.centralSection {
	text-align: center;
	margin-top: 38rpx;
	width: 686rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
}

.centralone {
	display: inline-block;
	margin-left: 30rpx;
}

.centralfor:nth-child(1) {
	background-image: url('../../static/imdex/first1.png');
	background-size: 162rpx 168rpx;
	background-position: right;
	background-repeat: no-repeat;
}

.centralfor:nth-child(2) {
	background-image: url('../../static/imdex/first2.png');
	background-size: 162rpx 168rpx;
	background-position: right;
	background-repeat: no-repeat;
}

.centralfor {
	display: inline-block;
	height: 168rpx;
	width: 336rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
	justify-content: space-around;

	.info {
		font-size: 24rpx;
		font-weight: 400;
		color: #86909c;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		view:nth-child(1) {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
	}

	image {
		width: 96rpx;
		height: 96rpx;
	}
}

.chartone {
	width: 320rpx;
	height: 220rpx;
}

.charttwo {
	width: 320rpx;
	height: 220rpx;
}

.chartthree {
	width: 320rpx;
	height: 480rpx;
}

/* 家庭服务字体样式 */
.typeface {
	color: #424f5e;
	font-size: 35rpx;
	font-weight: 900;
	margin-left: 50rpx;
	margin-right: 50rpx;
	display: flex;
	justify-content: space-between;
}

/* 家庭服务图片样式 */
.picture {
	text-align: center;
	margin-top: 40rpx;
}

.picture > view {
	display: inline-block;
}

.pictureone {
	width: 300rpx;
	height: 200rpx;
	margin-right: 30rpx;
	margin-bottom: 20rpx;
}

/** 医院列表*/

// .scroll-Y {
// 	height: 85vh;
// 	margin-top: 30rpx;
// 	background-color: #FFFFFF;
// }

.Bottombar {
	border-radius: 30rpx;
	padding: 20rpx;
	background-color: #ffffff;
	width: 686rpx;
	margin-left: 30rpx;
	margin-top: 30rpx;
	box-sizing: border-box;
	// margin-bottom: 30rpx;
	display: flex;
	box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}

.bottomnp {
	width: 180rpx;
	height: 180rpx;
}

.Bottomworde {
	margin-left: 30rpx;
	margin-top: 20rpx;
}

.Bottom_onew {
	font-size: 28rpx;
	font-weight: 900;
	margin-bottom: 10rpx;
	color: #424f5e;
}

.diswods {
	display: flex;
}

.S_display {
	background-color: #80d5d8;
	color: #ffffff;
	font-size: 25rpx;
	border-radius: 20rpx;
	width: 90rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	margin: 10rpx 10rpx 10rpx 0rpx;
	font-weight: 900;
}

.A_display {
	color: #fec345;
	height: 40rpx;
	line-height: 40rpx;
	margin: 10rpx;
	font-size: 28rpx;
}

.N_display {
	color: #00d4d7;
	height: 40rpx;
	line-height: 40rpx;
	margin: 10rpx;
	font-size: 28rpx;
}

/* 底部栏 */
.D_display {
	width: 340rpx;
	height: 50rpx;
	line-height: 50rpx;
	word-break: break-all;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 28rpx;
	color: #424f5e;
}

/** 弹窗样式 */

.btn_contianer {
	margin-top: 40rpx;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.service_btn {
	width: 180rpx;
	height: 60rpx;
	color: #80d5d8;
	border: 2rpx solid #80d5d8;
	border-radius: 10rpx;
	text-align: center;
	line-height: 60rpx;
}

.cancel_btn {
	width: 180rpx;
	height: 60rpx;
	background-color: #80d5d8;
	color: #ffffff;
	border-radius: 10rpx;
	text-align: center;
	line-height: 60rpx;
}
.br14 {
	border-radius: 14rpx;
}
.d-flex {
	display: flex;
}
.mycontent {
	background-color: #fff;
	box-sizing: border-box;
	padding: 20rpx;
}
.a-center {
	align-items: center;
}
.j-center {
	justify-content: center;
}
.myimg {
	width: 58rpx;
	height: 58rpx;
	image {
		width: 100%;
		height: 100%;
	}
}

.noticeBar {
	margin: 120rpx auto 0;
	width: 400rpx;
	height: 50rpx;
	line-height: 50rpx;
	background: #f0fdff;
	color: #999;
	font-size: 24rpx;
	border-radius: 50rpx;
	display: flex;
	.list {
		width: 100%;
		height: 100%;
	}
}
</style>
